<template>
  <div class="">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="佣金明细" />
    <div class="none" v-if="condition">
      <image class="none-img" :src="imgBaseUrl + 'none.png'" mode="widthFix" />
    </div>
    <div class="commission" v-else>
      <div class="header">
        <div class="header-item">说明</div>
        <div class="header-item header-time">时间</div>
        <div class="header-item">金额</div>
      </div>
      <div class="main">
        <div class="content" v-for="item in commissionList" :key="item.id">
          <div class="state">{{item.remark}}</div>
          <div class="time">{{item.createtime}}</div>
          <div class="money">{{item.money}}元</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      commissionList: [],
      imgBaseUrl: this.$store.state.imgBaseUrl,
      condition: false
    };
  },
  onShow() {
    this.init();
  },
  onReachBottom() {
    if (this.length < 20) return;
    this.page++;
    this.init(this.page);
  },
  methods: {
    async init(page = 1) {
      const res = await this.$gh.request("member.info", {
        data: {
          op: "getCommission",
          page,
          psize: 20
        }
      }).catch((err) => {
        if(err.code == 41009){
          this.$store.dispatch('login')
        }
        if(err.code == 201){
          this.condition = true
        }
      })
      const { list } = res.data;
      this.commissionList = this.commissionList.concat(list);
      this.length = list.length;
    }
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.none {
  font-size: 30rpx;
  color: @font-color;
  text-align: center;
  .none-img{
    width: 50%;
    margin-top: 100rpx;
  }
}
.commission {
  padding: 25rpx 25rpx 0;
  .header {
    .flex();
    height: 75rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background-color: #eaf0fe;
    color: @deep-color;
    font-size: 32rpx;
    .header-item {
      width: 30%;
      border-right: 1px solid @font-color;
      text-align: center;
      &:last-child {
        border: none;
      }
    }
    .header-time {
      width: 40%;
    }
  }
  .main {
    height: calc(100vh - 75rpx - 25rpx);
    background-color: #fff;
    .content {
      .flex();
      padding: 30rpx 0 25rpx;
      text-align: center;
      border-bottom: 1px solid #eee;
      color: @font-color;
      .state {
        width: 30%;
        font-size: 30rpx;
      }
      .time {
        width: 40%;
        font-size: 28rpx;
      }
      .money {
        width: 30%;
        font-size: 28rpx;
      }
    }
  }
}
</style>